<template>
	<div class="contentPannel-container">
		<div class="top">
			<SupervisoryControl></SupervisoryControl>
		</div>
		<div class="title">
			<div class="title-box">
				<div class="title-text" data-content="告警中心">告警中心</div>
			</div>
		</div>
		
		<div class="bottom">
			<AlarmCenter></AlarmCenter>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import {
		ref,
		computed,
		watch,
		onBeforeUnmount
	} from 'vue';
	import AlarmCenter from './components/AlarmCenter.vue'
	import SupervisoryControl from './components/SupervisoryControl/SupervisoryControl.vue'
	import {
		useStore
	} from "vuex";
</script>

<style scoped lang="scss">
	.contentPannel-container {
		padding: 0 1.5em;
		.top {
			height: 38em;
			background-image: url('@/assets/img/index/centerTop.png');
			background-size: 100% 100%;
			padding: 3.1em 3.1em 3.5em 2.59em;
		}
		.title {
			background: url("@/assets/img/header/header.png") no-repeat top center/cover;
			height: 2.6875em;
			display: flex;
			justify-content: space-between;
			padding: 0 3.125em;
			box-sizing: border-box;
			position: relative;
			width: 100%;
			
			.title-box {
				position: absolute;
				left: 0;
				right: 0;
				// top: 20px;
				top: 0.5em;
				display: flex;
				justify-content: center;
			}
			
			.title-text {
				font-size: 1.2em;
				color: #cfcfcf;
				letter-spacing: 0.2em;
				position: relative;
				text-align: center;
				line-height: 1.5;
			}
			
			// .title-text:after {
			// 	content: attr(data-content);
			// 	color: transparent;
			// 	position: absolute;
			// 	top: 0;
			// 	left: 0;
			// 	clip-path: ellipse(12rem 10rem at -0% 50%);
			// 	-webkit-clip-path: ellipse(12rem 10rem at -0% 50%);
			// 	animation: spotlight 10s infinite;
			// 	background-image: url("@/assets/index/titleBg.jpg");
			// 	// background-image: url();
			// 	// background-image: linear-gradient(to top, #ffff00, #ffaa00);
			// 	background-size: 100% 100%;
			// 	background-position: center center;
			// 	background-clip: text;
			// 	-webkit-background-clip: text;
			// }
			@keyframes spotlight {
				0% {
					clip-path: ellipse(12rem 10rem at -0% 50%);
					-webkit-clip-path: ellipse(12rem 10rem at -0% 50%);
				}
			
				50% {
					clip-path: ellipse(12rem 10rem at 100% 50%);
					-webkit-clip-path: ellipse(12rem 10rem at 100% 50%);
				}
			
				100% {
					clip-path: ellipse(12rem 10rem at 0% 50%);
					-webkit-clip-path: ellipse(12rem 10rem at -0% 50%);
				}
			}
			
		}
		.bottom {
			height: 17.8em;
			background-image: url('@/assets/img/index/centerBottom.png');
			background-size: 100% 100%;
			padding: 1.8em;
		}
	}
</style>
